<template>
  <div class="app-container">
    <!-- <strong>讲师列表</strong> -->
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="projectQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item label="更新时间">
        <el-date-picker
          v-model="projectQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="list"
      style="width: 100%"
    >

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="上次审核未通过原因">
              <span>{{ props.row.appReason }}</span>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="序号"
        width="70"
        align="center"
      >
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

<!--      <el-table-column label="教师姓名" prop="name" align="center"/>-->

      <el-table-column label="成果名称" prop="achievementName" align="center"/>

      <el-table-column label="所属分类" prop="subCategory" align="center"/>

      <el-table-column label="审核状态" prop="state" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0">待审阅</span>
          <span v-if="scope.row.state === 1">未通过</span>
          <span v-if="scope.row.state === 2">通过</span>
        </template>
      </el-table-column>


      <el-table-column label="教师所属学院" prop="college" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.college === 1">商学院</span>
          <span v-if="scope.row.college === 2">管理学院</span>
          <span v-if="scope.row.college === 3">外语学院</span>
          <span v-if="scope.row.college === 4">堪萨斯国际学院</span>
          <span v-if="scope.row.college === 5">电信与智能制造学院</span>
          <span v-if="scope.row.college === 6">计算机与软件工程学院</span>
          <span v-if="scope.row.college === 7">艺术设计学院</span>
          <span v-if="scope.row.college === 8">医学院</span>
          <span v-if="scope.row.college === 9">文法学院(语委办)</span>
          <span v-if="scope.row.college === 10">体育学院</span>
          <span v-if="scope.row.college === 11">新闻与传播学院</span>
          <span v-if="scope.row.college === 12">建筑工程学院</span>
          <span v-if="scope.row.college === 13">音乐戏剧学院</span>
          <span v-if="scope.row.college === 14">马克思主义学院</span>
          <span v-if="scope.row.college === 15">国际教育学院</span>
          <span v-if="scope.row.college === 16">教育学院</span>
          <span v-if="scope.row.college === 17">继续教育学院</span>
          <span v-if="scope.row.college === 18">国际语言中心</span>
        </template>
      </el-table-column>


      <el-table-column label="申报状态" prop="approval" align="center"/>

      <el-table-column label="审阅时间" prop="updateTime" align="center"/>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="10px" icon="el-icon-edit" class="edit-button" @click="handleButtonClick(scope.row.id)">项目申报</el-button>
<!--          <el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>-->

          <el-drawer
            title="请选择申报类型 !"
            :before-close="handleClose"
            :visible.sync="dialog"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
          >
            <div class="demo-drawer__content">
              <div class="radio-options">
                <el-radio-group v-model="radio">
                  <div class="radio-option" v-for="option in options" :key="option.id">
                    <el-radio :label="option.id">{{ option.category }}</el-radio>
                  </div>
                </el-radio-group>
              </div>
              <div class="button-container">
                <el-button @click="dialog = false" class="cancel-button">取 消</el-button>
                <el-button type="primary" @click="submitForm" :loading="loading" class="submit-button">
                  {{ loading ? '提交中 ...' : '提 交' }}
                </el-button>
              </div>
            </div>
          </el-drawer>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />


  </div>
</template>

<script>
import * as teacher from '@/api/edu/eduTeacher'
export default {
  data() {
    return {
      list: null, // 查询之后接口返回集合
      page: 1, // 当前页
      limit: 10, // 每页记录数
      total: 0, // 总记录数
      projectQuery: {}, // 条件封装对象
      dialog: false,
      loading: false,
      radio: '',
      options: null,
      formLabelWidth: '80px',
      id:'',
    }
  },
  created() {
    this.getList()
    this.getProApp()
  },
  mounted(){
    this.getList()
  },
  methods: {
    // 条件查询教师信息
    getList(page = 1) {
      this.page = page
      teacher.historyApplication(this.page, this.limit, this.projectQuery)
        .then(response => {
          // 请求成功
          // response接口返回的数据
          // console.log(response)
          this.list = response.data.rows
          this.total = response.data.total
          console.log(this.list)
          console.log(this.total)
        })
    },
    getProApp(){
      teacher.getProApplication().then(response => {
        console.log("1111111111111")
        console.log(response.data.list)
        this.options = response.data.list
        this.radio = this.options[0].id;
      })
    },
    handleButtonClick(id){
      this.dialog = true;
      // alert('Clicked row ID:' + id);
      this.id = id
    },
    handleClose(done) {
      this.$confirm('确定要提交表单吗？')
        .then(() => {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            done();
            console.log("sdadasdasd234134132", this.$refs.drawer);
            teacher.lookApplication(this.id, this.radio).then((response) => {
              this.$message({
                message: '操作成功',
                type: 'success',
              });
              this.getList();
              this.id = '';
              this.dialog = false;
            });
          }, 2000);
        })
        .catch(() => {});
    },
    submitForm() {
      this.handleClose(() => {});
    },
    //清空要查询的内容
    resetData() {
      this.projectQuery = {}
      this.getList()
    },
    //审核通过
    okReview(id){
      alert(id)
    },
  }
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 150px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.edit-button {
  color: rgb(80, 156, 90);
  font-weight: bold;
}

.disable-button {
  color: #6ebf00; /* 蓝色 */
}

.delete-button {
  color: rgb(255, 140, 140); /* 红色 */
}
.radio-options {
  margin-left: -200px; /* 设置离左边框的距离 */
}

.radio-option {
  margin-bottom: 30px; /* 调整每个选项之间的间距 */

}

.button-container {
  margin-top: 170px; /* 确保按钮与选项之间有足够的间距 */

}

.cancel-button {
  margin-right: 100px; /* 设置取消按钮与提交按钮之间的间距 */
  font-size: 16px; /* 调整选项文字的字体大小 */
  font-weight: bold; /* 将字体加粗 */
}
.el-radio .el-radio__label {
  font-family: Arial, sans-serif;
  color: #333;
  font-size: 16px; /* 调整字体大小 */
  font-weight: bold; /* 将字体加粗 */
}
</style>
